﻿@page "/docs/helpers/colors"

<Seo Canonical="/docs/helpers/colors" Title="Blazorise Color Utilities" Description="Discover how to use Blazorise color utilities to add meaning, highlight content, and style components with contextual and theme-aware colors." />

<DocsPageTitle>
    Blazorise Color Utilities
</DocsPageTitle>

<DocsPageLead>
    Use Blazorise color utilities to visually convey meaning, highlight important content, and maintain consistent design across your application.
    These utilities work seamlessly with all contextual variants and include built-in support for link styling and hover states.
</DocsPageLead>

<DocsPageParagraph>
    Below is a list of available contextual color classes that can be applied to most Blazorise components to customize their appearance and improve user experience.
</DocsPageParagraph>

<Alert Color="Color.Info" Visible>
    <AlertDescription>
        Note: Every component has a <Code>Default</Code> color applied automatically unless a specific color is defined.
    </AlertDescription>
</Alert>

<DocsPageSection>
    <DocsPageSectionHeader Title="Background">
        <Paragraph>
            The <Code>Background</Code> utility allows you to quickly set contextual background colors
            for any component. It supports the same color palette used across all Blazorise themes.
        </Paragraph>
        <Paragraph>
            Background colors can be applied through the <Code>Background</Code> parameter on components
            such as <Code>Div</Code>, <Code>Card</Code>, or <Code>Alert</Code>.
            Each color corresponds to a contextual variant that adapts automatically to the selected theme.
        </Paragraph>
        <Paragraph>
            <UnorderedList>
                <UnorderedListItem><Code>@nameof( Background.Default )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( Background.Primary )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( Background.Secondary )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( Background.Success )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( Background.Danger )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( Background.Warning )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( Background.Info )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( Background.Light )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( Background.Dark )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( Background.White )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( Background.Transparent )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( Background.Body )</Code></UnorderedListItem>
            </UnorderedList>
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BackgroundColorsExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BackgroundColorsExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Text Colors">
        <Paragraph>
            The <Code>TextColor</Code> utility provides an easy way to apply contextual color
            to text elements. These color variants are consistent with the overall theme
            and can be used to emphasize status, importance, or hierarchy in your content.
        </Paragraph>
        <Paragraph>
            You can assign text colors using the <Code>TextColor</Code> parameter on any component
            that renders text, such as <Code>Paragraph</Code>, <Code>Span</Code>, or <Code>Div</Code>.
        </Paragraph>
        <Paragraph>
            The available text color values include:
            <UnorderedList>
                <UnorderedListItem><Code>@nameof( TextColor.Default )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( TextColor.Primary )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( TextColor.Secondary )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( TextColor.Success )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( TextColor.Danger )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( TextColor.Warning )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( TextColor.Info )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( TextColor.Light )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( TextColor.Dark )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( TextColor.Body )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( TextColor.Muted )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( TextColor.White )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( TextColor.Black50 )</Code></UnorderedListItem>
                <UnorderedListItem><Code>@nameof( TextColor.White50 )</Code></UnorderedListItem>
            </UnorderedList>
        </Paragraph>
        <Paragraph>
            Some frameworks, such as Bootstrap&nbsp;5, also support additional text variants
            like <Code>Emphasis</Code>, allowing you to write <Code>TextColor.Success.Emphasis</Code>
            for softer, more modern tone variations that align with the current theme palette.
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TextColorsExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TextColorsExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="SnackbarColor">
        <UnorderedList>
            <UnorderedListItem><Code>None</Code></UnorderedListItem>
            <UnorderedListItem><Code>Primary</Code></UnorderedListItem>
            <UnorderedListItem><Code>Secondary</Code></UnorderedListItem>
            <UnorderedListItem><Code>Success</Code></UnorderedListItem>
            <UnorderedListItem><Code>Danger</Code></UnorderedListItem>
            <UnorderedListItem><Code>Warning</Code></UnorderedListItem>
            <UnorderedListItem><Code>Info</Code></UnorderedListItem>
            <UnorderedListItem><Code>Light</Code></UnorderedListItem>
            <UnorderedListItem><Code>Dark</Code></UnorderedListItem>
        </UnorderedList>
    </DocsPageSectionHeader>
</DocsPageSection>

